<template>
  <li>
    <div @click="toggle">
      <!-- 标题 -->
      {{model.title}}
      <!-- 有子元素就显示 -->
      <span class="item-open" v-if="isFolder">[{{open ? '-' : '+'}}]</span>
    </div>

    <ul v-show="open" v-if="isFolder">
      <item class="item" v-for="(model, index) in model.children" 
        :model="model" :key="index"></item> 
    </ul>
  </li>
</template>

<script>
export default {
  name: 'Item',
  props: {
    model: Object
  },
  data(){
    return {
      open: false
    }
  },
  computed: {
    isFolder(){
      return this.model.children && this.model.children.length
    }
  },
  methods: {
    toggle(){
      if(this.isFolder){
        this.open = !this.open
      }
    }
  }
}
</script>

<style scoped>
.item-open {
  cursor: pointer;
}
</style>